<template lang="html">
  <div id="cart-content">
   	<div v-for='(item,index) in commodity' :key='index'>
   		<div class='cart-center'> 
        <div class='commodity-left' @click='XinHander(item)'>
          <div :class="[item.flag ? 'commodity-left-xin' : 'commodity-left-yuan']"></div>
        </div>
        <div class='commodity-img'>
          <img :src='item.img' alt="">
        </div>
        <div class='commodity-right'>
          <div class='commodity-right-title'>
            <p>{{item.title}}</p>
          </div>
          <div class='commodity-right-a'>
            编辑
          </div>
          <div class='commodity-right-center'>
            {{item.introduce}}
          </div>
          <div class='commodity-right-bottom'>
            ￥{{item.price}}
          </div>
        </div>
      </div>
    </div>
    <div id="cartbottom">
    <div class='cartbottom-left'>
    <div class='cartbottom-left-yuan'></div>
    <div class='cartbottom-left-p'><p>全选</p></div>
    </div>
    <div class='cartbottom-center'>
      <div class='cartbottom-center-h3'>
        <h3>合计: </h3>
      </div>
      <div class='cartbottom-center-b'>
        <b href="">￥0 不含运费</b>
      </div>
      
    </div>
    <router-link to='/confirmorder'  tag='div' class='cartbottom-right'>
  结算（0）
    </router-link>
  </div>
  </div>
</template>

<script>
export default {
  name:'CartContent',
  data(){
  	return{

  	}
  },
  props:{
  	commodity:{
  		type:Array,
  		default:function(){
  			return []
  		}
  	}
  },
  methods:{
    XinHander(item){ 
      if(item.flag){
        item.flag = false
      }else{
        　item.flag = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
#cart-content{
  width: 100%;
  height: 100%;
  .cart-center{
    background-color:#fff;
    width: 100%;
    margin-top:0.6rem;
    height: 2.4rem;
    float: left;
    background:#f1f1f1;
    .commodity-left{
      width: 10%;
      height: 100%;
      float: left;
      .commodity-left-yuan{
        width: 0.3rem;
        height: 0.3rem;
        border:2px solid #717171;
        border-radius:0.3rem;
        margin: 1.1rem auto;
      }
      .commodity-left-xin{
        width: 0.3rem;
        height: 0.3rem;
        border:2px solid #717171;
        background:#717171;
        border-radius:0.3rem;
        margin: 1.1rem auto;
      }
    }
    .commodity-img{
      width: 25%;
      height: 100%;
      float: left;
      padding:0.15rem 0;
      box-sizing:border-box;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .commodity-right{
      width: 61%;
      height: 100%;
      float: left;
      margin-left:1%;
      padding:0.1rem;
      .commodity-right-title{
        width: 80%;
        font-size:0.35rem;
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
        float: left;
      }
      .commodity-right-a{
        width: 20%;
        float: left;
        font-size:0.35rem;
        color:#717171;
      }
      .commodity-right-center{
        width: 100%;
        height: 50%;
        float: left;
        color:#717171;
      }
      .commodity-right-bottom{
        color:red;
        font-size:0.35rem;
      }
    }
  }
  #cartbottom{
  width: 100%;
  height: 1rem;
  bottom:1.2rem;
  position: fixed;
  .cartbottom-left{
    float: left;
    width: 25%;
    height: 1rem;
    .cartbottom-left-yuan{
      width: 0.3rem;
      height: 0.3rem;
      border:2px solid #717171;
      border-radius:0.3rem;
      margin: 0.3rem 10%;
      float: left;
    }
    .cartbottom-left-p{
      width: 54%;
      height: 100%;
      float: left;
      p{
        margin:0.2rem 10%;
        font-size:0.4rem;
      }
      
    }
  }
  .cartbottom-center{
    width: 30%;
    height: 100%;
    float: left;
    margin-left:15%;
    line-height:1rem;
    .cartbottom-center-h3{
      float: left;
    }
    .cartbottom-center-b{
      float: right;
      font-size:0.1rem;
      color:#717171;
    }
  }
  .cartbottom-right{
    font-size:0.3rem;
    float: right;
    width: 25%;
    height: 100%;
    background-color: #43bf92;
    line-height:1rem;
    text-align:center;
  }
}
}
</style>
<style>
.{
  border-radius: ;
}
</style>
